<template>
    <div>
        <twemoji-textarea
                ref="twemoji"
                style="position: absolute;right: 0;width: 100%; height: 15%;bottom: 0;"
                :emojiData="emojiDataAll"
                :emojiGroups="emojiGroups"
                @contentChanged="contentChanged"
                :enableSendBtn="true"
                @enterKey="addMessage"
                :textareaDisabled="currentSession===null"
                :emojiPickerDisabled="currentSession===null">
        </twemoji-textarea>
    </div>
<!--    <div id="uesrtext">-->
<!--        <textarea placeholder="按 Ctrl + Enter 发送" v-model="content" v-on:keyup="addMessage" :disabled="currentSession===null"></textarea>-->
<!--    </div>-->
</template>

<script>
    import {mapState} from 'vuex';
    import {
        TwemojiTextarea
    } from '@kevinfaguiar/vue-twemoji-picker';
    import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/zh/emoji-all-groups.json';
    import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';

    export default {
        name: 'uesrtext',
        data() {
            return {
                content: ''
            }
        },
        components: {
            'twemoji-textarea': TwemojiTextarea
        },
        computed: {
            emojiDataAll() {
                return EmojiAllData;
            },
            emojiGroups() {
                return EmojiGroups;
            },
            sessions(){
                return this.$store.state.sessions
            },
            users(){
                return this.$store.state.users;
            },
            currentSession(){
                return this.$store.state.currentSession;
            }
        },
        methods: {
            contentChanged(e){
                this.content = e
            },
            onEnterKey(e) {
                console.log("ClickedEnter", e);
            },
            addMessage(e) {
                if (this.content.length) {
                    // console.log(this.currentSession)
                    let msgObj = {
                        to:this.currentSession.username,
                        content:this.content
                    }
                    this.$store.state.stomp.send('/ws/chat',{},JSON.stringify(msgObj))
                    this.$store.commit('addMessage', msgObj);
                    this.$refs['twemoji'].cleanText()
                    this.content = ''
                }
            }
        }
    }
</script>

<style lang="scss">
    .twemoji-textarea-outer > #twemoji-textarea{
        height: 80px;
        overflow-y: scroll;
    }
</style>
